import {
  TabBar,
  Tabs,
  NavBar,
  Picker,
  List,
  Card,
  Collapse,
} from 'antd-mobile';
import { useState } from 'react';
import { Column, Pie } from '@ant-design/plots';
import {
  SmileOutline,
  PieOutline,
  CalendarOutline,
  ContentOutline,
} from 'antd-mobile-icons';
import haoImg from '../assets/dabao_header.jpg';
import jieImg from '../assets/erbao_header.jpg';
import { data11, data12 } from '@/data/11';
import './style.less';
import { useCreation, useMemoizedFn } from 'ahooks';
import dayjs from 'dayjs';

const pickerOptions = [
  { label: '十一月 - 化学', value: '11' },
  { label: '十二月 - 物理', value: '12' },
];

const App = () => {
  const [activeKey, setActiveKey] = useState('1');
  const [visible, setVisible] = useState(false);
  const [value, setValue] = useState(['12']);

  const titleText = useCreation(() => {
    return pickerOptions.find((d) => d.value === value[0])?.label;
  }, [value]);

  const data = useCreation(() => {
    switch (value[0]) {
      case '11':
        return data11;
      case '12':
        return data12;
      default:
        return [];
    }
  }, [value]);

  const allData = useCreation(() => {
    const haoData = data.filter((d) => d.name === 'hao');
    const jieData = data.filter((d) => d.name === 'jie');

    const haoP = haoData.reduce((all, next) => {
      return all + (next.pTimes - 0);
    }, 0);
    const haoV = haoData.reduce((all, next) => {
      return all + (next.vTimes - 0);
    }, 0);
    const haoS = haoData.reduce((all, next) => {
      return all + (next.sTimes - 0);
    }, 0);
    const jieP = jieData.reduce((all, next) => {
      return all + (next.pTimes - 0);
    }, 0);
    const jieV = jieData.reduce((all, next) => {
      return all + (next.vTimes - 0);
    }, 0);
    const jieS = jieData.reduce((all, next) => {
      return all + (next.sTimes - 0);
    }, 0);

    return {
      haoP,
      haoS,
      haoV,
      jieP,
      jieS,
      jieV,
    };
  }, [data]);

  const haoTitle = useCreation(() => {
    return (
      <div className="user">
        <img src={haoImg} />
        子豪
      </div>
    );
  }, []);

  const jieTitle = useCreation(() => {
    return (
      <div className="user">
        <img src={jieImg} />
        子杰
      </div>
    );
  }, []);

  const countPColor = useMemoizedFn((value) => {
    const v = value - 0;
    let color = '#ccc';
    if (v > 180) {
      color = 'red';
    } else if (v > 120) {
      color = '#ff5f12';
    } else if (v > 60) {
      color = '#ff9712';
    } else if (v > 30) {
      color = '#d2b611';
    } else if (v > 0) {
      color = '#cfd211';
    }

    return color;
  });

  const countSColor = useMemoizedFn((value) => {
    const v = value - 0;
    let color = '#ccc';
    if (v > 180) {
      color = 'red';
    } else if (v > 120) {
      color = '#46de19';
    } else if (v > 60) {
      color = '#40dc6a';
    } else if (v > 30) {
      color = '#71dbe8';
    } else if (v > 0) {
      color = '#71b8e8';
    }

    return color;
  });

  const countHour = useMemoizedFn((value) => {
    if (value) {
      const v = value - 0;
      const hour = Math.floor(v / 60);
      const minute = v % 60;
      return `${hour}.${minute}`;
    }

    return 0;
  });

  const countDayColor = useMemoizedFn((value) => {
    const d = dayjs(value).format('d');
    return ['0', '6'].includes(d) ? '#04c9b6' : 'auto';
  });

  return (
    <div className="page-con">
      <NavBar
        back={null}
        right={
          activeKey === '1' ? (
            <CalendarOutline
              className="option-btn"
              onClick={() => {
                setVisible(true);
              }}
            />
          ) : (
            ''
          )
        }
      >
        {titleText}
      </NavBar>

      {/* 明细玩 */}
      {activeKey === '1' && (
        <Tabs>
          <Tabs.Tab title={haoTitle} key="hao">
            <div className="table">
              <List.Item className="table-header">
                <div className="title">日期</div>
                <div className="title">游戏</div>
                <div className="title">视频</div>
                <div className="title">学习</div>
              </List.Item>
              {data
                .filter((d) => d.name === 'hao')
                .map((d) => (
                  <>
                    <List.Item>
                      <div
                        className="title"
                        style={{ color: countDayColor(`${d.year}-${d.day}`) }}
                      >
                        {d.day}
                      </div>
                      <div
                        className="title"
                        style={{ color: countPColor(d.pTimes) }}
                      >
                        {d.pTimes}
                      </div>
                      <div
                        className="title"
                        style={{ color: countPColor(d.vTimes) }}
                      >
                        {d.vTimes}
                      </div>
                      <div
                        className="title"
                        style={{ color: countSColor(d.sTimes) }}
                      >
                        {d.sTimes}
                      </div>
                    </List.Item>
                  </>
                ))}
            </div>
          </Tabs.Tab>
          <Tabs.Tab title={jieTitle} key="jie">
            <div className="table">
              <List.Item className="table-header">
                <div className="title">日期</div>
                <div className="title">游戏</div>
                <div className="title">视频</div>
                <div className="title">学习</div>
              </List.Item>
              {data
                .filter((d) => d.name === 'jie')
                .map((d) => (
                  <>
                    <List.Item>
                      <div
                        className="title"
                        style={{ color: countDayColor(`${d.year}-${d.day}`) }}
                      >
                        {d.day}
                      </div>
                      <div
                        className="title"
                        style={{ color: countPColor(d.pTimes) }}
                      >
                        {d.pTimes}
                      </div>
                      <div
                        className="title"
                        style={{ color: countPColor(d.vTimes) }}
                      >
                        {d.vTimes}
                      </div>
                      <div
                        className="title"
                        style={{ color: countSColor(d.sTimes) }}
                      >
                        {d.sTimes}
                      </div>
                    </List.Item>
                  </>
                ))}
            </div>
          </Tabs.Tab>
        </Tabs>
      )}

      {/* 明细学 */}
      {activeKey === '2' && (
        <Tabs>
          <Tabs.Tab title={haoTitle} key="hao">
            <Collapse defaultActiveKey={['1']}>
              <Collapse.Panel key="1" title="11月">
                <h2>问题</h2>
                <p>1. 周末学习时间不够</p>
                <p className="a">方案：多学习</p>
                <p>2. 周末游戏时间过长</p>
                <p className="a">方案：少玩</p>
                <h2>下月目标</h2>
              </Collapse.Panel>
              <Collapse.Panel key="2" title="12月">
                <h2>复盘</h2>
                <p>
                  1.
                  周末学习时间不够。上月学习11小时，本月学习6.35小时。说多学习，其实是多玩。
                </p>
                <p>2. 周末游戏时间过长。本月多次未汇报，无法合理评估</p>
                <h2>问题</h2>
                <p>1. 周末学习时间不够</p>
                <p className="a">方案：</p>
                <p>2. 有12天未汇报，三天打鱼两天晒网</p>
                <p className="a">方案：</p>
                <p>3. 实际游戏时间比汇报的长，对自己不负责</p>
                <p className="a">方案：</p>
                <h2>下月目标(语)</h2>
                <p>意见，培养自律习惯。</p>
              </Collapse.Panel>
            </Collapse>
          </Tabs.Tab>
          <Tabs.Tab title={jieTitle} key="jie">
            <Collapse defaultActiveKey={['1']}>
              <Collapse.Panel key="1" title="11月">
                <h2>问题</h2>
                <p>1. 经常忘记汇报</p>
                <p className="a">方案：</p>
                <p>2. 周1~4作业过多，没有时间学习</p>
                <p className="a">方案：</p>
                <h2>下月目标</h2>
              </Collapse.Panel>
              <Collapse.Panel key="2" title="12月">
                <h2>复盘</h2>
                <p>经常忘记汇报的问题本月已减少很多，定闹钟的方案有效</p>
                <p>
                  周1~4作业过多，没有时间学习。本月有大概7天在学校学习，有提升
                </p>
                <h2>问题</h2>
                <p>
                  1. 上月玩18.30小时，学习10.45小时。本月玩24小时，学习?小时。
                </p>
                <p className="a">方案：</p>
                <h2>下月目标(语)</h2>
              </Collapse.Panel>
            </Collapse>
          </Tabs.Tab>
        </Tabs>
      )}

      {/* 分析 */}
      {activeKey === '3' && (
        <div className="con">
          <Card title="玩游戏">
            <Column
              data={data}
              isGroup
              xField="day"
              yField="pTimes"
              seriesField="name"
              label={{
                // 可手动配置 label 数据标签位置
                position: 'middle',
                // 可配置附加的布局方法
                layout: [
                  // 柱形图数据标签位置自动调整
                  {
                    type: 'interval-adjust-position',
                  }, // 数据标签防遮挡
                  {
                    type: 'interval-hide-overlap',
                  }, // 数据标签文颜色自动调整
                  {
                    type: 'adjust-color',
                  },
                ],
              }}
            />
            <div className="result">
              <div>
                子豪: {allData.haoP} （{countHour(allData.haoP)}小时）
              </div>
              <div>
                子杰: {allData.jieP} （{countHour(allData.jieP)}小时）
              </div>
            </div>
          </Card>
          <Card title="刷视频(学习无关)">
            <Column
              data={data}
              isGroup
              xField="day"
              yField="vTimes"
              seriesField="name"
              label={{
                // 可手动配置 label 数据标签位置
                position: 'middle',
                // 可配置附加的布局方法
                layout: [
                  // 柱形图数据标签位置自动调整
                  {
                    type: 'interval-adjust-position',
                  }, // 数据标签防遮挡
                  {
                    type: 'interval-hide-overlap',
                  }, // 数据标签文颜色自动调整
                  {
                    type: 'adjust-color',
                  },
                ],
              }}
            />
            <div className="result">
              <div>
                子豪: {allData.haoV} （{countHour(allData.haoV)}小时）
              </div>
              <div>
                子杰: {allData.jieV} （{countHour(allData.jieV)}小时）
              </div>
            </div>
          </Card>
          <Card title="学习">
            <Column
              data={data}
              isGroup
              xField="day"
              yField="sTimes"
              seriesField="name"
              label={{
                // 可手动配置 label 数据标签位置
                position: 'middle',
                // 可配置附加的布局方法
                layout: [
                  // 柱形图数据标签位置自动调整
                  {
                    type: 'interval-adjust-position',
                  }, // 数据标签防遮挡
                  {
                    type: 'interval-hide-overlap',
                  }, // 数据标签文颜色自动调整
                  {
                    type: 'adjust-color',
                  },
                ],
              }}
            />
            <div className="result">
              <div>
                子豪: {allData.haoS} （{countHour(allData.haoS)}小时）
              </div>
              <div>
                子杰: {allData.jieS} （{countHour(allData.jieS)}小时）
              </div>
            </div>
          </Card>

          <Card title="对比">
            <h3>子豪</h3>
            <Pie
              appendPadding={10}
              data={[
                {
                  type: '游戏',
                  value: allData.haoP,
                },
                {
                  type: '视频',
                  value: allData.haoV,
                },
                {
                  type: '学习',
                  value: allData.haoS,
                },
              ]}
              angleField="value"
              colorField="type"
              radius={0.9}
            />
            <h3>子杰</h3>
            <Pie
              appendPadding={10}
              data={[
                {
                  type: '游戏',
                  value: allData.jieP,
                },
                {
                  type: '视频',
                  value: allData.jieV,
                },
                {
                  type: '学习',
                  value: allData.jieS,
                },
              ]}
              angleField="value"
              colorField="type"
              radius={0.9}
            />
          </Card>
        </div>
      )}

      <TabBar activeKey={activeKey} onChange={setActiveKey}>
        <TabBar.Item key="1" icon={<SmileOutline />} title="明细" />
        <TabBar.Item key="2" icon={<ContentOutline />} title="复盘" />
        <TabBar.Item key="3" icon={<PieOutline />} title="可视化" />
      </TabBar>
      <Picker
        columns={[pickerOptions]}
        visible={visible}
        onClose={() => {
          setVisible(false);
        }}
        value={value}
        onConfirm={(v: any) => {
          setValue(v);
        }}
      />
    </div>
  );
};

export default App;
